<script setup>
import { ref, reactive } from "vue";
import Item from "./left/item.vue";
import { Icon } from "@iconify/vue";
import Painter from "./painter/Painter.vue";
import Right from "./right/index.vue";

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<template>
  <div class="w-screen p-1 border-rad bg-slate-400">
    <el-row>
      <el-col :span="24">
        <header
          class="h-20 border-2 border-slate-400 border-solid rounded-t-xl bg-white"
        >
          ???????
        </header>
      </el-col>
    </el-row>
    <el-row
      class="flex justify-between min-h-[calc(100vh-6rem)] bg-white flex-nowrap"
    >
      <div class="border border-slate-400 border-solid">
        <el-menu
          mode="vertical"
          default-active="item"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
        >
          <el-menu-item index="item">
            <Icon icon="material-symbols:18-up-rating" />
            <span>组件</span>
          </el-menu-item>
          <el-menu-item index="template">
            <Icon icon="material-symbols:18-up-rating" />
            <span>模板</span>
          </el-menu-item>
          <el-menu-item index="elements">
            <Icon icon="material-symbols:18-up-rating" />
            <span>图层</span>
          </el-menu-item>
          <el-menu-item index="my">
            <Icon icon="material-symbols:18-up-rating" />
            <span>我的</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="border border-slate-400 border-solid">
        <Item class="w-52" />
      </div>
      <div
        class="painter overflow-scroll flex justify-center items-center border flex-1 border-slate-400 border-solid"
      >
        <Painter />
      </div>
      <div class="border border-slate-400 border-solid w-52">
        <Right />
      </div>
    </el-row>
  </div>
</template>

<style lang="scss">
.painter::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}
.painter::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.painter::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
</style>
